<template>
    <div class="">
        <ul>
            <li v-for="item in radioUrl" :key="item.id" @click="selectPlayList(item)">
                {{ item.title }}
            </li>
        </ul>
    </div>
</template>

<script>
import axios from 'axios'
export default {
    data(){
        return{
            radioUrl:[]
        };
    },
    created(){
        this.getData();
    },
    methods:{
        getData(){
            axios.get("/api/radio/category","")
            .then(res => {
                console.log(res.data.data)
                this.radioUrl=res.data.data
            })
            .catch(err => {
                console.error(err); 
            })
        },
        selectPlayList(item){
            const id = item.id
            this.$store.commit("setRadio",item)
            this.$router.push({path:`/radio/${id}`})
           
        },
        betterScrollHorizontal(num, itemWidth) {    //横向滑动  
            let width = num * itemWidth;
            this.$refs.content.style.width = width + "PX";
            this.$nextTick(() => {
                this.scroll = new BScroll(this.$refs.wrapper, {
                click: true,
                startX: 0,
                scrollX: true,//横向为true 
                scrollY: false,
                });
            });
        },
    }
}
</script>

<style scoped>
 
</style>